/**
 * @File   : StartExam.js
 * @Author : xue.xiaoBing
 * @Date   : 2021/4/25
 * @Desc   : 开始考试页面
 **/

import MathJax from "react-mathjax";
import {Link} from "react-router-dom";
import React, {Component} from "react";
import {Row, Col, Breadcrumb, Space, Button, Divider, Radio, Collapse, Image} from "antd/lib/index";
import {LeftOutlined, HeartOutlined} from "@ant-design/icons";

import Jihe from "src/assets/images/几何.jfif";

import HomeHeader from "src/components/head/homeHeader/HomeHeader";

const {Panel} = Collapse;
const que =
  "已知\\frac{{ - b \\pm \\sqrt {{b^2} - 4ac} }}{{2a}}，则下来选项正确的是()";
const tex2 = "Fib_n = \\left\\lfloor \\frac {\\phi^n}{\\sqrt(5)} + 0.5 " +
  "\\right\\rfloor";

class StartExam extends Component {
  constructor(props) {
    super(props);
    this.state = {
      top: 122,
      terms: null
    }
  }

  
  componentDidMount() {
    window.addEventListener('scroll', this.bindHandleScroll)
  }

  bindHandleScroll = (event) => {
    const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false)
      || window.pageYOffset
      || (event.srcElement ? event.srcElement.body.scrollTop : 0);

    if (scrollTop >= 120) {
      this.setState({
        top: 10
      })
    } else if (scrollTop > 20 && scrollTop < 120) {
      this.setState({
        top: 120 - scrollTop
      })
    } else {
      this.setState({
        top: 122
      })
    }
  };

  componentWillUnmount() {
    window.removeEventListener('scroll', this.bindHandleScroll)
  }

  render() {
    return (
      <div>
        <div>
          <HomeHeader/>
        </div>
        <div style={{backgroundColor: 'rgba(0,0,0,.1)', padding: '20px 5%', minHeight: 'calc(100vh - 50px)'}}>
          <Space direction={'vertical'} style={{width: '100%'}} size={20}>
            <Row justify='spacing-around' align={'middle'}>
              <Link to={"/exam/1/1"}><LeftOutlined/>返回考试</Link>
              <Divider type={'vertical'}
                       style={{width: '1px', backgroundColor: 'black', top: '1px', margin: '0 15px'}}/>
              <Breadcrumb style={{width: '70%'}}>
                <Breadcrumb.Item>
                  <a href="/">首页</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                  <a href="/exam">考试</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                  <a href="/exam/1/1">考试信息</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>开始考试</Breadcrumb.Item>
              </Breadcrumb>
            </Row>
            <div style={{
              width: '100%',
              minHeight: '230px',
              backgroundColor: 'white',
              borderRadius: '5px'
            }}>
              <Row style={{padding: '10px 20px', height: '100%'}}>
                <Col span={18} style={{height: '100%'}}>
                  <Row justify={'space-around'} align={'middle'}
                       style={{
                         margin: '10px',
                         border: '1px solid rgba(0,0,0,.2)',
                         padding: '10px',
                         borderRadius: '5px'
                       }}>
                    <Col span={18}>
                      <h2>新入职员工Revit基础测试</h2>
                      <span>答题人：admin  交卷时间：2021-04-30 12:00</span>
                    </Col>
                    <Col span={6}>
                      <Button type={'primary'} size={'large'}>交卷</Button>
                    </Col>
                    <Divider/>
                  </Row>
                  <Row justify={'space-around'} align={'middle'}
                       style={{
                         margin: '10px',
                         border: '1px solid rgba(0,0,0,.2)',
                         padding: '10px',
                         borderRadius: '5px'
                       }}>
                    <Col span={24}>
                      <span style={{fontSize: '20px', fontWeight: '500'}}>单选题</span><span
                      style={{marginLeft: '20px'}}>共20题，共80分</span>
                    </Col>
                    <Divider style={{margin: '10px auto'}}/>
                    <Col span={1} style={{textAlign: 'center'}}>
                      <h2>1</h2>
                      <span>4.0分</span>
                    </Col>
                    <Col span={22} offset={1}>
                      <span style={{float: 'left'}}><MathJax.Provider><MathJax.Node
                        formula={que}/></MathJax.Provider></span>
                      <Divider style={{margin: '10px 0'}}/>
                      <Row align={'middle'}>
                        <Col span={18}>
                          <Radio.Group onChange={this.onChange}>
                            <Space direction="vertical">
                              <Radio value={1}>A. <MathJax.Provider><MathJax.Node
                                formula={tex2}/></MathJax.Provider></Radio>
                              <Radio value={2}>B. ZC</Radio>
                              <Radio value={3}>C. ZA</Radio>
                              <Radio value={4}>D. ZV</Radio>
                            </Space>
                          </Radio.Group>
                        </Col>
                        <Col span={6}>
                          <Image src={Jihe} alt="" style={{width: '80%', height: '80%', margin: '0 auto'}}/>
                        </Col>
                      </Row>
                      <Divider style={{margin: '10px 0'}}/>
                      <Collapse bordered={false} expandIconPosition={'left'} collapsible="header">
                        <Panel header="查看解析" key="1"
                               extra={
                                 <>
                                   <span style={{color: 'red'}}>正确答案是：B</span>
                                   <span style={{marginLeft: '20px'}}>你未答题</span>
                                   <Button type={'link'} size={'small'}
                                           style={{margin: '0 10px'}}><HeartOutlined/>收藏</Button>
                                 </>
                               }>
                          <div><span>查看解析</span></div>
                        </Panel>
                      </Collapse>
                    </Col>
                    <Divider style={{margin: '15px auto', backgroundColor: 'black'}}/>
                    <Col span={1} style={{textAlign: 'center'}}>
                      <h2>2</h2>
                      <span>5.0分</span>
                    </Col>
                    <Col span={22} offset={1}>
                      <p>显示刨面试图描述最全的是()</p>
                      <Divider style={{margin: '10px 0'}}/>
                      <Radio.Group onChange={this.onChange}>
                        <Space direction="vertical">
                          <Radio value={1}>A. 从项目浏览器中选择刨面视图</Radio>
                          <Radio value={2}>B. 双击剖面标头</Radio>
                          <Radio value={3}>C. 选择剖面线，在剖面线上单机鼠标右键，然后从弹出菜单中选择'进去视图'</Radio>
                          <Radio value={4}>D. 以上皆可</Radio>
                        </Space>
                      </Radio.Group>
                      <Divider style={{margin: '10px 0'}}/>
                      <Collapse bordered={false} expandIconPosition={'left'} collapsible="header">
                        <Panel header="查看解析" key="1" showArrow={false}
                               extra={
                                 <>
                                   <span style={{color: 'red'}}>正确答案是：B</span>
                                   <span style={{marginLeft: '20px'}}>你选择的答案是 A</span>
                                   <Button type={'link'} size={'small'}
                                           style={{margin: '0 10px', float: 'right'}}><HeartOutlined/>收藏</Button>
                                 </>
                               }>
                          <div><span>查看解析</span></div>
                        </Panel>
                      </Collapse>
                    </Col>
                    <Divider style={{margin: '15px auto', backgroundColor: 'black'}}/>
                    <Col span={1} style={{textAlign: 'center'}}>
                      <h2>3</h2>
                      <span>5.0分</span>
                    </Col>
                    <Col span={22} offset={1}>
                      <p>显示刨面试图描述最全的是()</p>
                      <Divider style={{margin: '10px 0'}}/>
                      <Radio.Group onChange={this.onChange}>
                        <Space direction="vertical">
                          <Radio value={1}>A. 从项目浏览器中选择刨面视图</Radio>
                          <Radio value={2}>B. 双击剖面标头</Radio>
                          <Radio value={3}>C. 选择剖面线，在剖面线上单机鼠标右键，然后从弹出菜单中选择'进去视图'</Radio>
                          <Radio value={4}>D. 以上皆可</Radio>
                        </Space>
                      </Radio.Group>
                      <Divider style={{margin: '10px 0'}}/>
                      <span style={{color: 'red'}}>正确答案是：B</span><span style={{marginLeft: '20px'}}>你选择的答案是 A</span>
                      <span style={{margin: '0 10px', float: 'right'}}><HeartOutlined/>收藏</span>
                      <span style={{margin: '0 10px', float: 'right'}}>{}查看解析</span>
                    </Col>
                    <Divider style={{margin: '15px auto', backgroundColor: 'black'}}/>
                    <Col span={1} style={{textAlign: 'center'}}>
                      <h2>4</h2>
                      <span>5.0分</span>
                    </Col>
                    <Col span={22} offset={1}>
                      <p>显示刨面试图描述最全的是()</p>
                      <Divider style={{margin: '10px 0'}}/>
                      <Radio.Group onChange={this.onChange}>
                        <Space direction="vertical">
                          <Radio value={1}>A. 从项目浏览器中选择刨面视图</Radio>
                          <Radio value={2}>B. 双击剖面标头</Radio>
                          <Radio value={3}>C. 选择剖面线，在剖面线上单机鼠标右键，然后从弹出菜单中选择'进去视图'</Radio>
                          <Radio value={4}>D. 以上皆可</Radio>
                        </Space>
                      </Radio.Group>
                      <Divider style={{margin: '10px 0'}}/>
                      <span style={{color: 'red'}}>正确答案是：B</span><span style={{marginLeft: '20px'}}>你选择的答案是 A</span>
                      <span style={{margin: '0 10px', float: 'right'}}><HeartOutlined/>收藏</span>
                      <span style={{margin: '0 10px', float: 'right'}}>{}查看解析</span>
                    </Col>
                  </Row>
                </Col>
                <Col span={6}>
                  <Row
                    style={{
                      margin: '10px',
                      border: '1px solid rgba(0,0,0,.2)',
                      padding: '10px',
                      borderRadius: '5px',
                      position: 'fixed',
                      top: this.state.top,
                      maxWidth: '20%'
                    }}>
                    <p style={{fontSize: '20px', fontWeight: '500', margin: '10px 0'}}>答题卡 <span
                      style={{fontSize: '14px', color: 'red'}}>本次考试仅有一次机会</span></p>
                    <Divider style={{margin: 0}}/>
                    <p style={{fontSize: '16px', fontWeight: '500', marginTop: '10px'}}>单选题</p>
                    <Row gutter={[16, 16]} style={{width: '100%'}}>
                      <Col span={4}>
                        <Button style={{borderRadius: '4px'}} danger>1</Button>
                      </Col>
                      <Col span={4}>
                        <Button style={{borderRadius: '4px', border: '1px solid green'}}>2</Button>
                      </Col>
                      <Col span={4}>
                        <Button style={{borderRadius: '4px'}} danger>3</Button>
                      </Col>
                      <Col span={4}>
                        <Button style={{borderRadius: '4px'}}>4</Button>
                      </Col>
                      <Col span={4}>
                        <Button style={{borderRadius: '4px'}} danger>5</Button>
                      </Col>
                      <Col span={4}>
                        <Button style={{borderRadius: '4px'}}>6</Button>
                      </Col><Col span={4}>
                      <Button style={{borderRadius: '4px'}} danger>7</Button>
                    </Col>
                      <Col span={4}>
                        <Button style={{borderRadius: '4px'}}>8</Button>
                      </Col>
                    </Row>
                    <p style={{fontSize: '16px', fontWeight: '500', marginTop: '10px'}}>多选题</p>
                    <Space style={{width: '100%'}}>
                      <Button style={{borderRadius: '4px', width: '100%'}} danger block>9</Button>
                      <Button
                        style={{borderRadius: '4px', border: '1px solid green', width: '40px', textAlign: 'center'}}
                        block>10</Button>
                      <Button style={{borderRadius: '4px', width: '40px'}} danger size={'default'}><span
                        style={{left: '-4px', position: 'relative'}}>11</span></Button>
                      <Button style={{borderRadius: '4px', width: '40px'}} type={'dashed '}>12</Button>
                    </Space>
                    <Divider style={{margin: '20px 0', backgroundColor: 'black'}}/>
                    <Radio>只看错题</Radio>
                  </Row>

                </Col>
              </Row>
            </div>
          </Space>
        </div>
      </div>
    )
  }
}

export default StartExam